<template>
  <div class="resourceCls">
    <el-card>
      <div class="resourceLine">
        <div>
          资源名称：<el-input placeholder="资源名称"></el-input>
        </div>
        <div>
          资源路径:<el-input placeholder="资源路径"></el-input>
        </div>
        <div>
          资源分类：
          <el-select v-model="selectVal" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="lineBtn">
          <el-button>重置</el-button>
          <el-button type="primary">查询搜索</el-button>
        </div>
      </div>
    </el-card>
    <el-card>
      <el-button size="small">添加</el-button>
      <el-button size="small">资源分类</el-button>
    </el-card>
    <el-card>
      <table-base :tableData="tableData">
        <template>
          <el-table-column
            prop="id"
            label="编号"
            width="80">
          </el-table-column>
          <el-table-column
            prop="name"
            label="资源名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="description"
            label="资源路径">
          </el-table-column>
          <el-table-column
            prop="createdTime"
            label="描述">
          </el-table-column>
          <el-table-column
            prop="createdTime"
            label="添加时间"
            width="80">
          </el-table-column>
          <el-table-column
            label="操作"
            width="150"
            align="center">
            <template v-slot="{row}">
              <el-button
                type="text"
                size="small"
                @click="editFnc(row)">
                编辑</el-button>
              <el-button
                type="text"
                size="small"
                @click="deleteFnc(row)">
                删除</el-button>
            </template>
          </el-table-column>
        </template>
      </table-base>
    </el-card>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  name: 'resourcePage',
  data () {
    return {
      selectVal: '',
      options: [
        {
          value: '选项1',
          label: '黄金糕'
        },
        {
          value: '选项2',
          label: '双皮奶'
        }
      ],
      tableData: []
    }
  },
  methods: {
    editFnc (row:any) {
      console.log(row)
    },
    deleteFnc (row:any) {
      console.log(row)
    }
  }

})
</script>

<style lang="scss" scoped>
.resourceLine{
  display: flex;
  align-items: center;
  div{
    padding: 0 20px;
  }
  .el-input{
    width: 200px;
  }
  .lineBtn{
    width: 450px;
    display: flex;
    justify-content: right;
  }
}
</style>
